/* FAQ主容器 */
.faq-container {
  width: 60vw;                    /* 视窗宽度60% */
  max-width: 800px;               /* 最大宽度限制 */
  min-width: 320px;               /* 最小宽度限制 */
  /* margin: 2rem auto;              居中显示 */
  /* padding: 1.5rem 2rem;           内边距 */
  /* background: #ffffff;            白色背景 */
  /* border-radius: 12px;            圆角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 阴影 */
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; /* 字体 */
}

/* 主标题 */
.faq-main-title {
  /* color: #3d50ff;                主色调 */
  font-size: 1.5rem;             /* 字体大小 */
  /* text-align: center;            居中 */
  margin-bottom: 1.8rem;         /* 下边距 */
  padding-bottom: 0.8rem;        /* 下内边距 */
  border-bottom: 1px solid #f0f2f5; /* 分割线 */
}

/* 每个分类容器 */
.faq-category {
  margin-bottom: 1rem;           /* 分类间距 */
  border: 1px solid #e8e8e8;     /* 边框 */
  border-radius: 8px;            /* 圆角 */
  overflow: hidden;              /* 隐藏溢出 */
  transition: all 0.3s ease;     /* 过渡效果 */
}

/* 分类头部 */
.faq-category-header {
  padding: 1rem 1.5rem;         /* 内边距 */
  background: #f7f8fa;          /* 背景色 */
  cursor: pointer;              /* 手型指针 */
  display: flex;                /* 弹性布局 */
  align-items: center;          /* 垂直居中 */
  transition: background 0.2s;  /* 过渡效果 */
}

/* 分类头部悬停效果 */
.faq-category-header:hover {
  background: #edf0f5;         /* 悬停背景 */
}

/* 分类标题 */
.faq-category-title {
  color: #333;                 /* 文字颜色 */
  font-size: 1.05rem;          /* 字体大小 */
  font-weight: 600;            /* 字重 */
  margin: 0;                   /* 清除默认 */
  display: flex;               /* 弹性布局 */
  align-items: center;         /* 垂直居中 */
}

/* 分类图标 */
.faq-category-icon {
  margin-right: 0.8rem;        /* 右边距 */
  font-size: 0.9rem;           /* 图标大小 */
  color: #3d50ff;              /* 主色调 */
}

/* 问题列表 */
.faq-question-list {
  list-style: none;            /* 清除列表样式 */
  padding: 0;                  /* 清除内边距 */
  margin: 0;                   /* 清除外边距 */
}

/* 单个问题项 */
.faq-question-item {
  padding: 0.9rem 1.5rem;      /* 内边距 */
  border-top: 1px dashed #eaecef; /* 顶部虚线 */
  transition: background 0.2s; /* 过渡效果 */
}

/* 问题项悬停效果 */
.faq-question-item:hover {
  background: #f7f8fa;         /* 悬停背景 */
}

/* 问题文本 */
.faq-question-text {
  color: #555;                 /* 文字颜色 */
  font-size: 0.95rem;          /* 字体大小 */
  line-height: 1.6;            /* 行高 */
}

/* 展开的分类额外样式 */
.faq-category.expanded {
  box-shadow: 0 2px 8px rgba(61, 80, 255, 0.1); /* 蓝色阴影 */
}

/* 响应式设计 - 平板 */
@media (max-width: 768px) {
  .faq-container {
    width: 75vw;               /* 调整宽度 */
    padding: 1.2rem;           /* 调整内边距 */
  }
  
  .faq-category-header {
    padding: 0.9rem 1.2rem;    /* 调整内边距 */
  }
}

/* 响应式设计 - 手机 */
@media (max-width: 480px) {
  .faq-container {
    width: 90vw;               /* 调整宽度 */
    min-width: 300px;          /* 最小宽度 */
  }
  
  .faq-main-title {
    font-size: 1.3rem;         /* 调整字体 */
  }
  
  .faq-category-title {
    font-size: 1rem;           /* 调整字体 */
  }
  
  .faq-question-text {
    font-size: 0.9rem;         /* 调整字体 */
  }
}